<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件练习1</title>
</head>
<!--引入本地的vue-->
<script type="text/javascript" src="../../../javascript/vue.js"></script>
<body>
<div id="root">
    <h1>{{msg}}</h1>
    <hr>
    <hello></hello>
    <hr>
    <school></school>
    <hr>
    <student></student>
</div>
<div id="root2">
    <h1>{{msg}}</h1>
    <hr>
    <student></student>
</div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false
//创建一个school组件
    const school = Vue.extend({
        template:`
        <div class="demo">
            <h2>所在国家城市：{{city}}</h2>
            <h2>交通工具：{{taxi}}</h2>
        </div>
        `,
        data(){
            return {
                city:"中国北京",
                taxi:"火车，地铁",
            }
        },
    })

//创建一个hello组件
const hello = Vue.extend({
    template:`
    <div class="demo">
    <h1>欢迎您加入：{{family}}家庭</h1>
    <h2>欢迎您前往:{{address}}加入我们</h2>
    <button @click = "showName"> 点击提示公司名称</button>
</div>
    `,
    data(){
        return{
            family:"云溪公司",
            address:"陕西省西安市XXX街道XXX号",
        }

    },
    methods:{
        showName(){
            alert(this.family)
        }
    }
})
//创建一个student组件
    const student  = Vue.extend({
        template:`
        <div class="demo">
        <h2>学生姓名：{{studentname}}</h2>
        <h2>学生年龄：{{studentage}}</h2>
        </div>
        `,
        data(){
            return{
                studentname:"张三",
                studentage:"18",
            }
        },
    })
    //创建全局组件
    Vue.component('student',student),

//创建vm
    new Vue({
        el:'#root',
        data:{
            msg:"欢迎使用",
        },
        //注册组件
        components:{
            hello:hello,
            school:school,
            student:student,
        }
    })
//创建vm
    new Vue({
        el:"#root2",
        data:{
            msg:"你好呀！"
        },
    })
</script>
</html>